<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>邀请记录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../default/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../default/css/index.css?v20190528"/>
    <link rel="stylesheet" href="../default/css/animat.min.css">
    <style type="text/css">
       .mui-content {
            background: #fcc270;
            min-height: 100%;
        }

        .mui-bar {
            background: transparent;
        }

        .mui-bar-transparent {
            background: rgba(15, 5, 74, 0);
        }
        .invitation-btn-box{
            padding: 40% 20px;
        }

        /*.top-bg{
            background: #fff url(https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/sendfriend.png) no-repeat;
            background-size: 100%;
            height: 280px;
        }*/
        .add-en-box {
            background: #0e0449 url("https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/sendfriend/2.jpg") no-repeat;
            background-size: 100% 100%;
            padding: 0 3.12%;
            border: none;
            margin: 0;
        }

        .modtai-control-box {
            top: 20%;
        }

        .jianbiancolor {
            background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
        }

        .day-task-box {
            padding: 0;
            border-radius: 10px;
            overflow: hidden;
            text-align: center;
        }

        .day-task-title {
            padding: 10px 15px;
        }

        .ewm-box {
            padding: 20px;
        }

        .invitation-btn-box .icon-ico {
            font-size: 5rem;
        }

        .invitation-box2 p {
            font-size: 13px;
        }

        #ewmcode {
            width: 80%;
        }

        /*canvas*/
        /*canvas*/
        .conhaibao {
            position: fixed;
            z-index: 1;
            right: 10px;
            width: 50px;
            height: 50px;
            top: 20%;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            border-radius: 50%;
            font-size: 14px;
            text-align: center;
        }

        .generatebox {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            display: none;
            z-index: 11;
            background-color: #666;
        }

        #canvasbox {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }

        #canvasbox img {
            display: inline-block;
            align-items: center;
        }

        .canimg {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            background-color: #666;
            display: none;
        }

        .closecanvs {
            position: fixed;
            right: 10px;
            top: 10px;
            z-index: 10;
            display: none;
        }

        .closecanvs span {
            font-size: 3rem;
            color: #fff;
        }

        #canvasbox img {
            width: 90%;
        }
        .add-en-box{
            background-color: #0e0449;
        }
        .invitation-btn-box .invitation-code{
            color: #fff;
        }
        p{
            color: #fff;
        }
        .invitation-box1{
            background-color: transparent;
            color: #fff;
            border-radius: initial;
            box-shadow: none;
        }
        img{
            display: block;
        }

    </style>
</head>
<body>

<header class="mui-bar mui-bar-transparent">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
</header>

<div class="mui-content">
    <!--<img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/sendfriend.png" alt="">-->
    <img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/sendfriend/1.jpg" alt="">
    <div class="add-en-box">
        <div class="mui-card invitation-box1">
            <div class="invitation-btn-box">
                <div class="mui-col-sm-12 mui-col-xs-12 ">
                    <p class="modtai-control-show"><i class="mui-icon icon iconfont icon-ico"></i></p>
                    <p>面对面邀请</p>
                </div>
                <div class="mui-col-sm-12 mui-col-xs-12">
                    <div class="invitation-code">
                        我的邀请码 <b id="invitationCode">----</b><i class="mui-icon mui-icon-redo"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/sendfriend/3.jpg" alt="">
</div>

<div class="generatebox">
    <div id="canvasbox">
        <canvas id="my_canvas" width="540" heihgt="280"></canvas>
    </div>
    <div class="closecanvs">
        <span class="mui-icon mui-icon-closeempty"></span>
    </div>
</div>
<div class="canimg"></div>

<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>
<script src="../default/js/canvas.js"></script>
<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js" ></script>

<script>

    var generateQRCode;
    var usercode;
    var userName;
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });

    // ajax地址


    // 显示
    mui("body").on('tap', '.modtai-control-show', function () {
        mui.showLoading("正在加载..", "div");
        $(".generatebox").css("display", "table");
        $(".canimg").css("display", "block");
        $(".closecanvs").css("display", "block");
        implementcanvs();
    });
    /* // 隐藏
     mui("body").on('tap', '.mui-icon-closeempty', function () {

     });*/

    $(function () {
        generateQRCode();
        generateimg();
        findusername();
        weChat();
    });

    function weChat() {
        $.ajax({
            url: website+'/Share/doPost',
            type: 'POST',
            dataType: 'json',
            //url需要编码传入而且要是完整的url除#之后的
            data: {"url":encodeURIComponent(window.location.href.split("#")[0])},
            success:function (res) {
                wx.config({
                    debug: false, //调试阶段建议开启
                    appId: res.appId,//APPID
                    timestamp: res.timestamp,//上面main方法中拿到的时间戳timestamp
                    nonceStr: res.nonceStr,//上面main方法中拿到的随机数nonceStr
                    signature: res.signature,//上面main方法中拿到的签名signature
                    //需要调用的方法接口
                    jsApiList: [
                        'checkJsApi',
                        'updateTimelineShareData',
                        'updateAppMessageShareData',
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage'
                    ]
                });

                wx.ready(function () {
                    //需在用户可能点击分享按钮前就先调用
                    //分享标题
                    var title = '玩58新媒体吧欢迎您!'
                    //分享描述
                    var describe = '一起开启阅读赚宝之旅吧!';
//                    //新闻id
                    var code1 = usercode;
                    //分享链接
//                    var _localhost1 = window.location.protocol ;
//                    var _localhost2 = window.location.hostname;
//                    var _localhost3 = window.location.port;
//                    var content = "/page/index?id=" + id;
//                    _localhost2 = _localhost1+_localhost2;
//                    _localhost3 = _localhost2+":"+_localhost3;
//                    content = _localhost3 + content;

                    //分享首图
                    var imgUrl = "https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/logo.jpg";

                    wx.updateTimelineShareData({
                        title: title, // 分享标题
                        desc: describe, // 分享描述
                        link: "http://newst.whilte.com/index.html?code1="+code1+"", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: imgUrl, // 分享图标
                        type: 'link', // 分享类型,music、video或link，不填默认为link
                        dataUrl: '' // 如果type是music或video，则要提供数据链接，默认为空
                    }, function(res) {
                        console.log('1')
                        alert("[调试信息1]");
                    });

                    wx.updateAppMessageShareData({
                        title: title, // 分享标题
                        desc: describe, // 分享描述
                        link: "http://newst.whilte.com/index.html?code1="+code1+"", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: imgUrl, // 分享图标
                        type: 'link', // 分享类型,music、video或link，不填默认为link
                        dataUrl: '' // 如果type是music或video，则要提供数据链接，默认为空
                    }, function(res) {
                        console.log('2')
                        alert("[调试信息2]");
                    });

                    //旧版本分享给朋友圈
                    wx.onMenuShareTimeline({
                        title: title, // 分享标题
                        desc: describe, // 分享描述
                        link: "http://newst.whilte.com/index.html?code1="+code1+"", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: imgUrl, // 分享图标
                        type: 'link', // 分享类型,music、video或link，不填默认为link
                        dataUrl: '' // 如果type是music或video，则要提供数据链接，默认为空
                    }, function(res) {
                        console.log('3')
                        alert("[调试信息3]");
                    });

                    //旧版本分享给朋友
                    wx.onMenuShareAppMessage({
                        title: title, // 分享标题
                        desc: describe, // 分享描述
                        link: "http://newst.whilte.com/index.html?code1="+code1+"", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: imgUrl, // 分享图标
                        type: 'link', // 分享类型,music、video或link，不填默认为link
                        dataUrl: '' // 如果type是music或video，则要提供数据链接，默认为空
                    }, function(res) {
                        console.log('4')
                        alert("[调试信息4]");
                    });
                });
            },
            error:function(response){
                console.log("删除失败["+response.responseText+"]!","error");
            }
        })
    }


    function generateimg() {
        mui.showLoading("正在加载..", "div");
        $.ajax({
            url: website + '/CreateQRCode/generateQRCode',
            type: 'post',
            data: {
                userId: userId,
            },
            success: function (data) {
                $("#ewmcode").attr('src', "data:image/png;base64," + data);
                generateQRCode = data;
                mui.hideLoading();
            }, error: function (err) {
                mui.showLoading("未知错误..", "div");
            }
        });

    }

    function findusername() {
        $.ajax({
            url: website + "/UserController/queryUserInformation",
            type: "post",
            data: {
                "userId": userId,
            },
            success: function (data) {

                userName = data.data.userName;

            }, error: function () {
                mui.toast('请先登录');
                setTimeout(function () {
                    mui.openWindow({
                        url: "http://newst.whilte.com/index.html",
                    });
                }, 1000)

            }
        })
    }


    function generateQRCode() {
        $.ajax({
            url: website + '/CreateQRCode/generateQRCode2',
            type: 'post',
            data: {
                userId: userId
            },
            success: function (data) {
                usercode = data;
                $("#invitationCode").html(data);
            },
            error: function () {
                mui.showLoading("未知错误..", "div");
            }
        });
    }


    // canvas
    mui("body").on('tap', '.closecanvs', function () {
        $(".generatebox").css("display", "none");
        $(".canimg").css("display", "none");
        $(".closecanvs").css("display", "none");
    });

</script>
</body>
</html>
